<template>
    <div>
        <!-- 头部 -->
        <div class="category-header">
            <router-link tag="span" to="/index"><svg t="1640164914293" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="64511" width="16" height="16"><path d="M744.3372563 1017.13692445c11.1289837 0 22.2701037-4.2477037 30.76551111-12.74311112 16.99081482-16.99081482 16.99081482-44.54020741 0-61.51888592L345.02883555 512.80099555 775.10276741 82.7392c16.99081482-16.97867852 16.99081482-44.54020741 0-61.51888592-16.99081482-16.99081482-44.52807111-16.99081482-61.51888593 0L252.74443852 482.04762075a43.51469037 43.51469037 0 0 0 0 61.53102222l460.83944296 460.81517036c8.48327111 8.49540741 19.62439111 12.74311111 30.75337482 12.74311112z" fill="#ffffff" p-id="64512"></path></svg></router-link>
            <div class="icont-header">书架</div>
        </div>

        <div class="book-null" v-show="!bookshelf">您还未添加任何书籍</div>

        <!-- 书架内容 -->
        <div class="my-book" v-show="bookshelf" v-for="(item,index) in bookshelflist" :key="index">
            <img :src="item.link[1].href" alt="">
            <div class="txt-right">
                <div class="txt-header">
                    <div class="txt-header-left">{{item.title}}</div>
                    <div class="txt-header-right" @click="bookClick(item.id)">立即阅读</div>
                </div>
                <div class="txt-center">
                    作者:{{item.author.name}}
                </div>
                <div class="txt-botton">
                    <span>连载至二百五十六章</span>
                    <span @click="del(index)"><svg t="1640582025049" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="108640" width="16" height="16"><path d="M883.05618 327.590512a31.96005 31.96005 0 0 0-31.96005 31.96005V926.841448a31.96005 31.96005 0 0 1-31.96005 31.96005h-607.240949a31.96005 31.96005 0 0 1-31.96005-31.96005V357.952559a31.96005 31.96005 0 0 0-63.9201 0V926.841448a95.88015 95.88015 0 0 0 95.88015 95.88015h607.240949a95.88015 95.88015 0 0 0 95.88015-95.88015V359.550562a31.96005 31.96005 0 0 0-31.96005-31.96005zM993.957553 206.781523h-117.612984V63.9201a63.9201 63.9201 0 0 0-63.9201-63.9201H210.616729a63.9201 63.9201 0 0 0-63.9201 63.9201v142.861423H31.96005a31.96005 31.96005 0 0 0 0 63.9201h961.997503a31.96005 31.96005 0 0 0 0-63.9201z m-181.533084 0H210.616729V63.9201h601.80774z" fill="" p-id="108641"></path><path d="M360.189763 818.177278V373.293383a34.836454 34.836454 0 0 0-31.96005-37.073658 34.836454 34.836454 0 0 0-31.96005 37.073658V818.177278a34.836454 34.836454 0 0 0 31.96005 37.073658 34.836454 34.836454 0 0 0 31.96005-37.073658zM548.114856 818.177278V373.293383a34.836454 34.836454 0 0 0-31.96005-37.073658 34.836454 34.836454 0 0 0-31.960049 37.073658V818.177278a34.836454 34.836454 0 0 0 31.960049 37.073658 34.836454 34.836454 0 0 0 31.96005-37.073658zM736.679151 818.177278V373.293383a31.96005 31.96005 0 1 0-63.9201 0V818.177278a31.96005 31.96005 0 1 0 63.9201 0z" fill="" p-id="108642"></path></svg></span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:['bookshelflist','bookshelf'],
    data(){
        return {

        }
    },
    methods:{
        bookClick(id){
            this.$emit('get-book-id',id)
            // console.log('一品id',id)
            this.$router.push({name:'bookdetail',params:{ids:id}})
        },
        del(index){
            this.bookshelflist.splice(index,1)
        }
    }
    
}
</script>

<style lang="less" scoped>
.category-header{
    width: 100%;
    height: 44px;
    background-color: #FC0E50;
    display: flex;
    align-items: center;
    span{
        display: block;
        width: 44px;
        height: 44px;
        text-align: center;
        line-height: 44px;
    }
    .icont-header{
        color: white;
        margin: auto;
        padding-right: 44px;
    }
}

.book-null{
    width: 358px;
    height: 44px;
    margin: 20px auto;
    text-align: center;
    line-height: 44px;
}

.my-book{
    width: 358px;
    height: 104px;
    margin: auto;
    display: flex;
    img{
        width: 54px;
        height: 72px;
        margin-top: 16px;
        margin-right: 16px;
    }
    .txt-right{
        width: 288px;
        height: 72px;
        margin-top: 16px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .txt-header{
            width: 288px;
            height: 20px;
            display: flex;
            justify-content: space-between;
            .txt-header-left{
                font-size: 0.875rem;
                font-weight: bold;
            }
            .txt-header-right{
                color: #808080;
                font-size: 0.75rem;
            }
        }
        .txt-center{
            color: #808080;
            font-size: 0.75rem;
        }
        .txt-botton{
            color: #808080;
            font-size: 0.75rem;
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>